<template>
 <div class="chartsStyle" ref="mainRef1"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { nextTick } from "vue";
const mainRef1 = ref();

const chart1 = () => {
  var chartDom = mainRef1.value;
  // @ts-ignore
  var myChart = echarts.init(chartDom);
  var option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 100],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: "rose 1" },
          { value: 38, name: "rose 2" },
          { value: 32, name: "rose 3" },
          { value: 30, name: "rose 4" },
          { value: 28, name: "rose 5" },
          { value: 26, name: "rose 6" },
          { value: 22, name: "rose 7" },
          { value: 18, name: "rose 8" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
};

onMounted(() => {
  setTimeout(() => {
    chart1();
  }, 500);
});
</script>
<style scoped>
/* 添加图表容器样式 */
.chartsStyle {
  width: 100%;
  height: 100%; /* 或固定高度如400px */
}
</style>
